
<!--详情页面-->

<template>
  <div class="body">
    <catshit-header></catshit-header>
    <div class="main">
      <div class="up">
        <div style="width: 20%">
          <logo style="width: 180px; height: 200px"/>
        </div>
        <div style="width: 80%;justify-content: left">
          <div style="justify-content: space-between;width: 85%">
            <div style="display: flex;justify-content: space-between">
              <h1>{{movieInfoTest.spotname}}</h1><span><el-button size="small" @click="openDialog">评 论</el-button>
              <el-button size="small" type="primary" @click="toTickets">购 票</el-button></span>
            </div>
            <el-divider></el-divider>
          </div>
          <el-divider></el-divider>
        </div>
      </div>
      <div class="down">
        <el-tabs type="card">
          <el-tab-pane label="详情介绍">
            <div class="article">
              <h3>地区：<span>{{movieInfoTest.spotaddr}}</span></h3>
              <el-divider></el-divider>
              <h3>类型：<span>{{movieInfoTest.spottype}}</span></h3>
              <el-divider></el-divider>
              <h3>名字：<span>{{movieInfoTest.spotname}}</span></h3>
              <el-divider></el-divider>
              <h3>联系方式：<span>{{movieInfoTest.spotdial}}</span></h3>
              <el-divider></el-divider>
              <h3>简介：<span>{{movieInfoTest.spotinfo}}</span></h3>
            </div>
          </el-tab-pane>
          <el-tab-pane label="评论列表">
            <el-card v-for="(item,index) in comments" style="padding: 20px">
              <h2>{{item.userid+'：'}}{{item.text}}</h2>
<!--              <p>时间：{{item.time}}</p>-->
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog
      title="评论"
      :visible.sync="dialogCommentVisible"
      width="45%"
      :before-close="handleClose">
      <el-form :model="newComment">
        <el-form-item label="正文">
          <el-input
            type="textarea"
            :autosize="{ minRows: 10, maxRows: 10}"
            placeholder="请输入内容"
            v-model="newComment">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="addComment">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import CatshitHeader from "../../../components/CatshitHeader";
    import Cookies from 'js-cookie'
    export default {
      name: "index",
      components: {CatshitHeader},
      data(){
        return{
          filmId:Number,
          movieInfo:{},
          comments:[],
          /*new comment to submit*/
          newComment:'',
          dialogCommentVisible:false,
          movieInfoTest:{
            film_name:'',
            film_length:'',
            film_recommend:'',
            film_box_office:'',
            film_actor:'',
            status:1,
            is_on_show:0,
          },
          user_id:Cookies.get('user_id')
        }
      },
      created() {
        this.filmId = this.$route.query.filmId;
      },
      watch: {
        $route (to, from) {
          this.$router.go(0)
        }
      },
      mounted() {
        this.getFilmInfo();
/*        let data = {
          value: this.filmName,
          search_by: "film_name"
        }
        this.$axios.post('film/film/search', data).then((res) => {
          if (res.data.code === 0) {
            console.log(res);
            this.movieInfoTest=res.data.data.info[0];
          } else {
            alert("出错啦！")
          }
        })*/

      },
      methods:{
        openDialog(){
          this.dialogCommentVisible=true;
        },
        addComment(){
          let data = {
            spotid:this.filmId,
            userid:this.user_id,
            commenttext: this.newComment,
          }
          this.$axios.post('/comment', data).then((res) => {
            if (res.data.code === 0) {
              alert("评论添加成功")
              this.dialogCommentVisible=false
              this.getComments();
              this.newComment='';
            } else {
              alert("出错啦！")
            }
          })
        },
        handleClose(){
          this.dialogCommentVisible=false;
        },
        async getFilmInfo(){
          let mydata={
            spotid:this.filmId
          };
          this.$axios.post('/getdetail',mydata).then((res)=>{
            if (res.data.code === 0) {
              this.movieInfoTest=res.data.msg;
            } else {
              alert("出错啦！")
            }
            this.getComments();
          })
        },
        async getComments(){
          let mydata={
            spotid:this.filmId
          }
          this.$axios.post('/getcomment',mydata).then((res)=>{
            if (res.data.code === 0) {
              this.comments=res.data.msg;
            } else {
              alert("出错啦！")
            }
          })
        },
        toTickets(){
          this.$router.push({path:'/viewMovie/MovieDetail/Purchase',query:{"filmID":this.filmId}})
        }
      }
    }
</script>

<style scoped>
  .body{
    display: flex;
    background-color: aliceblue;
    justify-content: center;
  }
  .main{
    margin-top: 60px;
    width: 70%;
    background-color: white;
  }
  .up{
    padding: 50px;
    display: flex;
    align-items: center;
  }
  .article{
    margin-inline: 50px;
  }
</style>
